import { Card, Row, Col, DatePicker, Select, Button, Table, Space, Tag, message } from 'antd';
import { DownloadOutlined, AlertOutlined, LineChartOutlined } from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import { useState } from 'react';

const { RangePicker } = DatePicker;
const { Option } = Select;

const GlucoseMonitoring = () => {
  const [selectedPatient, setSelectedPatient] = useState('all');
  const [dateRange, setDateRange] = useState([]);

  // 模拟血糖数据
  const glucoseData = [
    { id: 1, patient: '张三', time: '2025-10-31 08:30', value: 8.5, status: 'high' },
    { id: 2, patient: '张三', time: '2025-10-31 12:15', value: 9.2, status: 'high' },
    { id: 3, patient: '张三', time: '2025-10-31 18:45', value: 7.8, status: 'normal' },
    { id: 4, patient: '李四', time: '2025-10-31 07:20', value: 6.5, status: 'normal' },
    { id: 5, patient: '李四', time: '2025-10-31 19:30', value: 12.1, status: 'high' },
    { id: 6, patient: '王五', time: '2025-10-31 08:00', value: 3.2, status: 'low' },
  ];

  // 血糖趋势数据
  const glucoseTrendOption = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['张三', '李四', '王五']
    },
    xAxis: {
      type: 'category',
      data: ['08:00', '12:00', '16:00', '20:00']
    },
    yAxis: {
      type: 'value',
      name: '血糖 (mmol/L)'
    },
    series: [
      {
        name: '张三',
        data: [8.5, 9.2, 7.8, 6.5],
        type: 'line',
        smooth: true
      },
      {
        name: '李四',
        data: [6.5, 7.2, 8.1, 12.1],
        type: 'line',
        smooth: true
      },
      {
        name: '王五',
        data: [5.2, 4.8, 3.9, 3.2],
        type: 'line',
        smooth: true
      }
    ],
    markLine: {
      data: [
        { yAxis: 7.0, name: '高血糖阈值' },
        { yAxis: 3.9, name: '低血糖阈值' }
      ]
    }
  };

  const columns = [
    { title: '患者', dataIndex: 'patient' },
    { title: '测量时间', dataIndex: 'time' },
    { 
      title: '血糖值', 
      dataIndex: 'value',
      render: (value, record) => (
        <span className={record.status === 'high' ? 'danger-tag' : record.status === 'low' ? 'warning-tag' : 'success-tag'}>
          {value} mmol/L
        </span>
      )
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (status) => {
        if (status === 'high') return <Tag color="error">高血糖</Tag>;
        if (status === 'low') return <Tag color="warning">低血糖</Tag>;
        return <Tag color="success">正常</Tag>;
      }
    },
    {
      title: '操作',
      render: (_, record) => (
        <Space>
          <Button type="link" size="small">详情</Button>
          <Button type="link" size="small">导出</Button>
        </Space>
      ),
    },
  ];

  const handleExportPDF = () => {
    message.success('血糖报告导出成功');
  };

  const handleAlertSetup = () => {
    message.info('跳转到告警设置页面');
  };

  return (
    <div>
      <h2>血糖监测</h2>
      
      {/* 筛选条件 */}
      <Card style={{ marginBottom: 24 }}>
        <Row gutter={16}>
          <Col span={6}>
            <div>患者筛选</div>
            <Select 
              value={selectedPatient} 
              onChange={setSelectedPatient} 
              style={{ width: '100%' }}
            >
              <Option value="all">全部患者</Option>
              <Option value="1">张三</Option>
              <Option value="2">李四</Option>
              <Option value="3">王五</Option>
            </Select>
          </Col>
          <Col span={10}>
            <div>时间范围</div>
            <RangePicker 
              value={dateRange} 
              onChange={setDateRange} 
              style={{ width: '100%' }}
            />
          </Col>
          <Col span={8}>
            <div style={{ height: 24 }}></div>
            <Space>
              <Button type="primary" icon={<LineChartOutlined />}>生成图表</Button>
              <Button icon={<AlertOutlined />} onClick={handleAlertSetup}>告警设置</Button>
              <Button icon={<DownloadOutlined />} onClick={handleExportPDF}>导出PDF</Button>
            </Space>
          </Col>
        </Row>
      </Card>

      {/* 图表展示 */}
      <Card title="血糖趋势图" style={{ marginBottom: 24 }}>
        <ReactECharts option={glucoseTrendOption} className="chart-container" />
      </Card>

      {/* 数据表格 */}
      <Card title="血糖记录">
        <Table 
          dataSource={glucoseData} 
          columns={columns} 
          rowKey="id" 
          pagination={{ pageSize: 10 }}
        />
      </Card>
    </div>
  );
};

export default GlucoseMonitoring;
